<!--
/**
* Author: linchun
* Date: 2022-08-19 10:24
* Desc: CouponGroup 套票组
*/
-->
<template>
  <view class="coupon-group">
    <!-- 内容 -->
    <view class="content flex-b-m">
      <!-- 套票类型 -->
      <view class="coupon-content flex-s-m">
        <view class="coupon-info flex-b-m">
          <!-- <view class="type"> {{ item.name }} </view> -->
          <!-- 产品给方案写死命名 特惠券包 20220804 宏伟 -->
          <view class="type"> 特惠券包 </view>
          <view class="pics">
            <text class="num"> {{ item.couponNum }} </text>
            <text class="unit"> 张 </text>
          </view>
        </view>
        <view class="coupon-price">
          <text class="unit"> ￥ </text>
          <text class="num"> {{ $utils.toFixed(item.saleTotalPrice) }} </text>
        </view>
      </view>
      <!-- 进步器 -->
      <view @click.stop="handleCheck(item)">
        <u-icon class="icon" :size="20" v-if="!checked" color="#45C8F3" :name="'plus-circle-fill'"></u-icon>
        <yy-stepper :min="min" v-if="checked" v-model="chooseNum" :max="item.maxNum" />
      </view>
    </view>
    <!-- 附加信息 -->
    <view class="tips flex-s-m" v-if="num > 0">
      <view class="">
        <text class="mr10"> 本单可用{{ num }}张 | </text>
        <text class="mr10" v-if="diffPriceSum(item)"> 补差￥{{ diffPriceSum(item) }} | </text>
      </view>
      <view class="special fc-yellow" v-if="$utils.toFixed(discountPrice)"> 省￥{{ $utils.toFixed(discountPrice) }} </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'CouponGroup',
    data() {
      return {
        chooseNum: 0
      }
    },
    mounted() {
      this.chooseNum = this.item.chooseNum
    },
    props: {
      checked: Boolean,
      item: {
        type: Object,
        default() {
          return {}
        }
      },
      num: {
        type: [String, Number]
      },
      min: {
        type: [String, Number]
      },
      discountPrice: [String, Number],
      value: {
        type: [Number, String]
      }
    },
    onShow() {},
    mounted() {
      this.init()
    },
    computed: {
      // chooseNum: {
      //   set(v) {
      //     this.$emit('input', v)
      //   },
      //   get() {
      //     return this.value
      //   }
      // }
    },
    methods: {
      // 初始化方法
      init() {
        this.chooseNum = this.item.chooseNum
      },
      handleCheck() {
        if (this.item.commodityId != this.commodityId) {
          this.chooseNum = this.item.minNum
        }
        this.$emit('check')
      },
      diffPriceSum(item) {
        //补差计算
        const num = this.$utils.isNaNStr(this.ablePackageCouponLen)
        const diffPrice = this.$utils.isNaNStr(item.diffPrice)
        const p = num * diffPrice
        return this.$utils.toFixed(p)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .coupon-group {
    padding-top: 26rpx;
    background: #fff;
    .tips {
      padding: 0 0 34rpx 0;
      font-size: 22rpx;
      color: #333333;
      .special {
        font-size: 22rpx;
      }
    }
    .content {
      margin-bottom: 18rpx;
      .coupon-info {
        width: auto;
        max-width: 300rpx;
        height: 70rpx;
        background: url(https://public-oss-file.zmaxfilm.com/applet/img/film-oxygen-uniapp/bg-coupon-info.png) no-repeat;
        background-size: 100%;
        padding: 0 0 0 22rpx;
        text-align: center;
        font-size: 28rpx;
        .type {
          min-width: 157rpx;
          width: auto;
          font-weight: bold;
          color: #924920;
        }
        .pics {
          width: 91rpx;
          color: #ffffff;
          .num {
            font-size: 32rpx;
            font-weight: bold;
          }
          .unit {
            font-size: 24rpx;
          }
        }
      }
      .coupon-price {
        margin-left: 36rpx;
        color: #333333;
        font-weight: bold;
        .unit {
          font-size: 24rpx;
        }
        .num {
          font-size: 36rpx;
        }
      }
    }
  }
</style>
